require("aui.loading");

let Utils = require("../../framework/js/utils");

Vue.component("anu-datatable", {
    template: `<div class="anu-datatable" :class="{'anu-datatable--empty': empty}">
        <div class="table-responsive" :aui-hidden="rows.length < 1">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th v-for="key in keys" v-html="key"></th>
                        <slot name="key"></slot>                        
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="row,index in rows">
                        <td>{{index + 1}}</td>
                        <td v-for="item in row.data">
                            <div v-if="_.isString(item) || _.isNumber(item)" v-html="item"></div>
                            <div v-if="_.isObject(item)">
                                <component :is="item.componentname" :data="item"></component>
                            </div>
                        </td>
                        <td v-if="rowcomponentname">
                            <component :is="rowcomponentname" :data="row"></component>
                        </td>    
                    </tr>
                    <slot name="append"></slot>
                </tbody>
            </table>
            <aui-pagination class="aui-datatable__pagination" 
                ref="pagination" @pageclick="pageChange"></aui-pagination>              
        </div>
        <div v-if="empty || rows.length < 1" class="anu-datatable__empty">暂无数据</div>        
        <aui-loading ref="loading"></aui-loading>
    </div>`,
    data() {
        var ret = {};
        ret.keys = [];
        ret.rules = [];
        ret.values = [];
        ret.rows = [];
        ret.empty = false;
        ret.totalCount = 0;
        ret.pageCount = 1;
        ret.currentPage = 1;
        ret.perPage = 10;
        ret.auto = true;
        ret.requestMethods = {};
        ret.rowcomponentname = "";
        return ret;
    },
    mounted() {
        this.anuElement = {};
        this.anuElement.loading = $(this.$refs.loading);
    },
    methods: {
        setData(data) {
            var self = this;
            if (data.data) {
                this.rows = data.data.map(function (v, index) {
                    var a = [];
                    self.rules.forEach(function (rule) {
                        if (rule.hasOwnProperty("value")) {
                            var item = rule.value(v);
                            if (item) {
                                a.push(item);
                            } else {
                                if (rule.hasOwnProperty("defaultval")) {
                                    a.push(rule.defaultval);
                                } else {
                                    a.push("");
                                }
                            }
                        }
                    });
                    return {
                        $index: index,
                        $item: v,
                        data: a
                    };
                });
            } else {
                console.error("返回值没有data");
            }
            if (data._meta) {
                self.$refs.pagination.setPagination(data._meta);
            }
        },
        setRequestMethods(createRequestMethods) {
            this.requestMethods = createRequestMethods;
        },
        refresh(params = {}) {
            var self = this;
            self.showLoading();
            self.requestMethods(Object.assign({page: self.currentPage},params)).then(function (response) {
                var res = response;
                if (self.handleResponse) {
                    res = self.handleResponse(_.cloneDeep(response));
                }
                if (self.beforeSetData) {
                    self.beforeSetData(res);
                }
                self.setData(res.data);
                if (self.onRequestReady) {
                    self.onRequestReady(res);
                }
                if (response.data._meta && response.data._meta.pageCount < 1) {
                    self.empty = true;
                    self.hideLoading();
                } else {
                    self.empty = false;
                }
                setTimeout(function () {
                    self.hideLoading();
                    if (self.onResponse) {
                        self.onResponse(res);
                    }
                }, 1000);
            });
        },
        registerRowComponent(component) {
            var self = this;
            self.rowcomponentname = Utils.uniqueSelector("datatable_");
            Vue.component(self.rowcomponentname, component);
        },
        pageChange(page) {
            var self = this;
            if (self.auto) {
                self.refresh({
                    page: page
                });
            }
            self.$emit("pagechange", page);
        },
        setRules (rules) {
            this.rules = rules;
            this.keys = rules.map(function (v) {
                return v.key;
            });
        },
        hideLoading() {
            if (this.$refs.loading) {
                this.$refs.loading.hideLoading();
            }
        },
        showLoading() {
            if (this.$refs.loading) {
                this.$refs.loading.showLoading();
            }
        }
    }
});